<script setup lang="ts" name="Register">
import {ref,reactive} from "vue"
import router from "@/router";
import {post} from "@/assets/request.ts";
import { ElMessage } from 'element-plus'
let userInfo=reactive({userName:'',password:'',rePassword:'',email:'',phone:''})
let msg=ref("");

const register = () =>{
  if( userInfo.userName.length<3 || userInfo.userName.length>12){
    msg.value="用户名格式不正确"
  }else if (userInfo.password.length<6 || userInfo.password.length>15){
    msg.value="密码格式不正确"
  }else if(userInfo.password != userInfo.rePassword){
    msg.value="两次密码不一致"
  }else if(!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(userInfo.email)){
    msg.value="邮箱格式不正确"
  }else if(!/^1[3-9]\d{9}$/.test(userInfo.phone)){
    msg.value="手机号格式不正确"
  }else {
     msg.value="用户已存在"
    post("/api/signin",userInfo).then(res=>{
      // console.log(res)
      msg.value="test!!!!!!!!!"
      if(parseInt(res.result)==1){
        msg.value="注册成功"
        router.replace({path:"/login"})
      } else if(parseInt(res.result)==0){
        msg.value="用户已存在"
        clearUserInfo()
      }
    })
  }



  ElMessage({
    message:msg.value,
    type: 'warning',
  })

}
// 定义清空方法
const clearUserInfo = () => {
  for (const key in userInfo) {
    userInfo[key] = '';
  }
};
</script>

<template>
  <div class="box">
    <div id="box_login">
      <!--    使用表单获取用户输入的数据-->
      <el-form :model="userInfo" label-width="100px">
        <el-form-item label="用户名：" prop="password">
          <!--          用于获取用户名的文本框-->
          <el-input v-model="userInfo.userName" type="text" style="width: 300px;" placeholder="3-12位有效字符"></el-input>
        </el-form-item>

        <el-form-item label="密码：" prop="password">
          <!--          用于获取用户密码的文本框-->
          <el-input v-model="userInfo.password" type="password" style="width: 300px;" placeholder="6-15位有效字符"></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="password">
        <!--          用于获取用户密码的文本框-->
        <el-input v-model="userInfo.rePassword" type="password" style="width: 300px;" placeholder="两次密码必须一致"></el-input>
        </el-form-item>
        <el-form-item label="邮箱地址：" prop="email">
          <!--          用于获取用户邮箱的文本框-->
          <el-input v-model="userInfo.email" type="text" style="width: 300px;" placeholder="邮箱地址"></el-input>
        </el-form-item>
        <el-form-item label="手机号：" prop="phone">
          <!--          用于获取用户手机号的文本框-->
          <el-input v-model="userInfo.phone" type="text" style="width: 300px;" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <!--        按钮-->
          <el-button @click="register" style="width: 300px;" type="primary">注册</el-button>
          <span style="margin: auto;padding-right:40px;color: #81807f">已有账号？<a href="#" style="text-decoration: none" @click="router.push({path:'/login'})">去登录</a></span>
        </el-form-item>
      </el-form>

    </div>
  </div>

</template>


<style scoped lang="css">
.box{
  background-image: url("../assets/login.jpg");
  background-repeat: no-repeat;
  background-size: 150%;
  background-position: -800px -1000px;
  width: 100%;
  height: 100vh;
}

#box_login{
  border-radius: 20px;
  position: fixed;
  background-color: rgba(0,0,0,.3);
  width: 410px;
  padding: 20px;
  left: 30%;
  top: 30%;
}

::v-deep  .el-form-item .el-form-item__labal{
  color: white;
}

</style>